<template>
  <h1>{{ msg }}</h1>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <p>Hello vite</p>

  <!-- composition api -->
  <Composition></Composition>

  <!-- Teleport:ModelTeleport -->
  <ModelTeleport></ModelTeleport>

  <!-- emits选项 -->
  <Emits @click="onClick"></Emits>

  <!-- 实例方法定义组件 -->
  <comp></comp>

  <!-- v-model的使用 -->
  <VmodelTest v-model="counter"></VmodelTest>
  <!-- <VmodelTest v-model:counter="counter"></VmodelTest> -->
  <!-- 等效于 -->
  <!-- <VmodelTest :counter="counter" @update:counter="counter=$event"></VmodelTest> -->

  <!-- render api发生变化 -->
  <RenderTest v-model:counter="counter"></RenderTest>

  <!-- 函数式组件 -->
  <Functional level="3">这是一个动态H元素</Functional>

  <!-- 异步组件 -->
  <AsyncComp></AsyncComp>

  <!-- 自定义指令 -->
  <p v-highLight="'green'">highLight this text !!</p>

  <!-- 动画 -->
  <TransitionTest></TransitionTest>

  <!-- 编程方式发送和监听事件 -->

  <button @click="sendMsg">emitc event</button>
</template>

<script>
import { defineAsyncComponent, h } from "vue"
import Composition from './Composition.vue'
import ModelTeleport from './ModelTeleport.vue'
import Emits from './Emits.vue'
import VmodelTest from './VmodelTest.vue'
import Functional from './Functional.vue'
import TransitionTest from './TransitionTest.vue'

//事件派发和监听
import mitt from "mitt"

export const emitter = mitt()
export default {
  name: 'HelloWorld',
  components: {
    Composition, ModelTeleport, Emits, VmodelTest, Functional, TransitionTest, AsyncComp: defineAsyncComponent(() => import('./NextPage.vue')),
    RenderTest: {
      props: {
        counter: {
          type: Number,
          default: 0
        }
      },
      render () {
        return h('div', [
          h('div', {
            onClick: this.onClick
          }, `I am RenderTest:${this.counter}`)
        ])
      },
      methods: {
        onClick () {
          this.$emit("update:counter", this.counter + 1)
        }
      }
    },

  },
  props: {
    msg: String
  },
  data () {
    return {
      counter: 1
    }
  },
  methods: {
    onClick () {
      console.log('click me')
    },
    sendMsg () {
      emitter.emit('someEvent', 'foooo')
    }
  }

}

</script>
